<template>
  <div class="register">
    <dialogBox v-bind:message="error" id="dialog" v-bind:href="location"></dialogBox>
    <div class="register-content">
      <div class="form-group">
        <i class="fa fa-user-circle fa-2x"></i>
        <input type="text" name="username" id="username" placeholder="请输入你的用户名" v-model="username">
      </div>
      <div class="form-group">
        <i class="fa fa-phone fa-2x"></i>
        <input type="tel" name="tel" id="tel" placeholder="请输入你的手机" v-model="phone">
      </div>
      <div class="form-group">
        <i class="fa fa-lock fa-2x"></i>
        <input type="password" name="password" id="password" placeholder="请输入密码" v-model="password">
      </div>
      <div class="form-group">
        <i class="fa fa-lock fa-2x"></i>
        <input type="password" name="repassword" id="repassword" placeholder="请再次输入密码" v-model="repassword">
      </div>
    </div>
    <div class="submit" v-on:click="submit()">
      <p>注册</p>
    </div>
    <a href="/#/login" class="other">已有账号？点击登录</a>
  </div>
</template>

<script>
  import $ from 'jquery'
  import dialogBox from '../public/dialog-box/dialog-box.vue'
    export default {
        name: 'Register',
        data () {
            return {
                error:'',
                location:'',
                username:'',
                phone:'',
                password:'',
                repassword:'',
                error:''
            }
        },
      components:{dialogBox},
      mounted:function () {
            $('#dialog').hide();
      },
      methods:{
            submit:function () {
                let username=this.username;
                let phone=this.phone;
                let password=this.password;
                let repassword=this.repassword;
                let that=this;
                if(username==''){
                    this.error='请输入你的用户名！';
                    $('#dialog').show();
                }else if(phone==''){
                  this.error='请输入你的手机号码（以此作为登录账号）！';
                  $('#dialog').show();
                }else if(password==''||repassword==''){
                  this.error='请根据提示输入完整密码！';
                  $('#dialog').show();
                }else  if(!(/^1[34578]\d{9}$/.test(phone))){
                  this.error='请填写正确的手机号码格式！';
                  $('#dialog').show();
                }else if(password!=repassword){
                  this.error='两次密码输入不一致！！';
                  $('#dialog').show();
                }else {
                  this.$ajax.post('/api/register', {
                    username: username,
                    phone:phone,
                    password: password
                  })
                    .then(function (response) {
                      $('#dialog').show();
                      that.error=response.data.success;
                      that.location='/#/login'
                    })
                    .catch(function (error) {
                      if(error.response){
                        that.error=error.response.data.error;
                        $('#dialog').show();
                        $('#loading').hide();
                      }
                    });
                }
            }
      }
    }
</script>

<style>
  @import "../../assets/css/font-awesome.min.css";
  @import "css/register.css";
</style>
